<div id="nbanner">

 <ul id="show_pic" style="left:0;">
  {#foreach from=$banner5 item=banner51 key=x name=foo#}
  <li><a href="{#$banner51.link#}" target="_blank"><img src="uploads/banner/{#$banner51.upfile#}" width="1000" height="220"/></a></li>
 {#/foreach#}
 </ul>

 <ul id="icon_num">
 {#foreach from=$banner5 item=banner51 key=x name=foo#}
 {#$x=$x+1#}
  <li {#if $x eq 1#}class="active"{#/if#}>{#$x#}</li>
 {#/foreach#}

 </ul>

</div>

</div>

<script type="text/javascript">

/**

 *glide.layerGlide((oEventCont,oSlider,sSingleSize,sec,fSpeed,point);

 *@param auto type:bolean 是否自动滑动 当值是true的时候 为自动滑动

 *@param oEventCont type:object 包含事件点击对象的容器

 *@param oSlider type:object 滑动对象

 *@param sSingleSize type:number 滑动对象里单个元素的尺寸（width或者height）  尺寸是有point 决定

 *@param second type:number 自动滑动的延迟时间  单位/秒

 *@param fSpeed type:float   速率 取值在0.05--1之间 当取值是1时  没有滑动效果

 *@param point type:string   left or top

 */

var glide =new function(){

	function $id(id){return document.getElementById(id);};

	this.layerGlide=function(auto,oEventCont,oSlider,sSingleSize,second,fSpeed,point){

		var oSubLi = $id(oEventCont).getElementsByTagName('li');

		var interval,timeout,oslideRange;

		var time=1; 

		var speed = fSpeed 

		var sum = oSubLi.length;

		var a=0;

		var delay=second * 1000; 

		var setValLeft=function(s){

			return function(){

				oslideRange = Math.abs(parseInt($id(oSlider).style[point]));	

				$id(oSlider).style[point] =-Math.floor(oslideRange+(parseInt(s*sSingleSize) - oslideRange)*speed) +'px';		

				if(oslideRange==[(sSingleSize * s)]){

					clearInterval(interval);

					a=s;

				}

			}

		};

		var setValRight=function(s){

			return function(){	 	

				oslideRange = Math.abs(parseInt($id(oSlider).style[point]));							

				$id(oSlider).style[point] =-Math.ceil(oslideRange+(parseInt(s*sSingleSize) - oslideRange)*speed) +'px';

				if(oslideRange==[(sSingleSize * s)]){

					clearInterval(interval);

					a=s;

				}

			}

		}

		

		function autoGlide(){

			for(var c=0;c<sum;c++){oSubLi[c].className='';};

			clearTimeout(interval);

			if(a==(parseInt(sum)-1)){

				for(var c=0;c<sum;c++){oSubLi[c].className='';};

				a=0;

				oSubLi[a].className="active";

				interval = setInterval(setValLeft(a),time);

				timeout = setTimeout(autoGlide,delay);

			}else{

				a++;

				oSubLi[a].className="active";

				interval = setInterval(setValRight(a),time);	

				timeout = setTimeout(autoGlide,delay);

			}

		}

	

		if(auto){timeout = setTimeout(autoGlide,delay);};

		for(var i=0;i<sum;i++){	

			oSubLi[i].onmouseover = (function(i){

				return function(){

					for(var c=0;c<sum;c++){oSubLi[c].className='';};

					clearTimeout(timeout);

					clearInterval(interval);

					oSubLi[i].className="active";

					if(Math.abs(parseInt($id(oSlider).style[point]))>[(sSingleSize * i)]){

						interval = setInterval(setValLeft(i),time);

						this.onmouseout=function(){if(auto){timeout = setTimeout(autoGlide,delay);};};

					}else if(Math.abs(parseInt($id(oSlider).style[point]))<[(sSingleSize * i)]){

							interval = setInterval(setValRight(i),time);

						this.onmouseout=function(){if(auto){timeout = setTimeout(autoGlide,delay);};};

					}

				}

			})(i)			

		}

	}

}

glide.layerGlide(true,'icon_num','show_pic',1000,3,0.08,'left');

</script>